﻿<%@ Page Title="" Language="C#" MasterPageFile="~/styles/MasterPage.master" AutoEventWireup="true"
    CodeFile="MusicPlay.aspx.cs" Inherits="MusicPlay" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link rel="stylesheet" type="text/css" href="plugin/jPlayer.2.1.0/css/style.css" />
    <script type="text/javascript" src="plugin/jPlayer.2.1.0/jquery.jplayer.min.js"></script>
    <script type="text/javascript" src="plugin/jPlayer.2.1.0/jquery.jplayer.inspector.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jquery_jplayer_1").jPlayer({
                ready: function () {
                    $(this).jPlayer("setMedia", {
                        mp3: "<%= FilePath%>"
                    }).jPlayer("play");
                },
                swfPath: "../js",
                supplied: "mp3",
                wmode: "window"
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentHead" runat="Server">
    <h3 id="titleDetails" class="titleDetails" runat="server">
    </h3>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentMain" runat="Server">
    <div id="jquery_jplayer_1" class="jp-jplayer">
    </div>
    <div id="jp_container_1" class="jp-audio">
        <div class="jp-type-single">
            <div class="jp-title">
                <ul>
                    <li><span id="musicTittle" class="span1" runat="server"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span
                        style="width: 400px"><marquee behavior="scroll" direction="left" onmouseover="this.stop();"
                            onmouseout="this.start();"><a
                        id="artistlnk" runat="server" class="lnk1"></a>&nbsp;&nbsp;&nbsp;<a id="albumlnk"
                            runat="server" class="lnk1"></a></marquee>
                    </span></li>
                </ul>
            </div>
            <div class="jp-gui jp-interface">
                <ul class="jp-controls">
                    <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                    <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                    <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                    <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                    <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                    <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max
                        volume</a></li>
                </ul>
                <div class="jp-progress">
                    <div class="jp-seek-bar">
                        <div class="jp-play-bar">
                        </div>
                    </div>
                </div>
                <div class="jp-volume-bar">
                    <div class="jp-volume-bar-value">
                    </div>
                </div>
                <div class="jp-time-holder">
                    <div class="jp-current-time">
                    </div>
                    <div class="jp-duration">
                    </div>
                    <ul class="jp-toggles">
                        <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                        <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat
                            off</a></li>
                    </ul>
                </div>
            </div>
            <div class="jp-no-solution">
                <span>Update Required</span> To play the media you will need to either update your
                browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/"
                    target="_blank">Flash plugin</a>.
            </div>
            <div>
                <ul class="musicButtonGroup">
                    <li><a class="musicButton" href="<%= FilePath%>">Download</a></li>
                    <li>
                        <asp:LinkButton ID="lnkAddToPlaylist" runat="server" CssClass="musicButton" OnClick="OpenAddPlaylistPanel">Add To Playlist</asp:LinkButton></li>
                    <li><a class="musicButton" href="#">Share</a></li>
                    <li><a class="musicButton" href="#">Services</a></li>
                    <li><a class="musicButton" href="">Like</a></li>
                </ul>
            </div>
            <div id="AddToPlaylistPanel" style="display: none" class="controlBox" runat="server">
                <h3>
                    Select :</h3>
                <ul class="listinline">
                    <li>
                        <asp:DropDownList ID="Lst_Playlist" runat="server">
                        </asp:DropDownList>
                    </li>
                    <li>
                        <asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="AddMusicToPlaylist" /></li>
                    <li>
                        <asp:Label ID="lblAddResult" runat="server" Text=""></asp:Label></li>
                </ul>
            </div>
            <h3 class="text3">
                Information</h3>
            <div class="musicDetails" style="margin-bottom:50px">
                <div class="musicCover">
                    <img id="musicCover" runat="server" width="125" height="125" />
                </div>
                <div class="musicDescription">
                    <span class="text2bold">Airtist : </span><a id="artistname" class="lnkhighlight"
                        runat="server"></a></span>
                    <div style="position: relative;top:10px;left:20px;">
                        <iframe src="http://www.facebook.com/plugins/like.php?href=<%=Request.Url.ToString() %>&amp"
                            width="50" height="25" frameborder="0"></iframe>
                    </div>
                    <br />
                    <span class="text2bold">Description : </span><span id="artistdescription" class="text1"
                        runat="server"></span>
                </div>
            </div>
            <div class="artistAlbumView">
                <p class="text3">
                    Albums :</p>
                <asp:Repeater ID="Rpt_AlbumArtist" runat="server">
                    <HeaderTemplate>
                        <ul>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <li><a href="TrackList.aspx?alid=<%# Eval("AlbumID")%>">
                            <div class="albumCover">
                                <img src="<%# Eval("AlbumCover")%>" alt="" width="125" height="125" />
                                <p class="albuminsidecover">
                                    <%# Eval("AlbumName")%></p>
                            </div>
                        </a></li>
                    </ItemTemplate>
                    <FooterTemplate>
                        </ul>
                    </FooterTemplate>
                </asp:Repeater>
            </div>
        </div>
    </div>
</asp:Content>
